<script setup lang="ts">
//幻灯片
import { HomeArray } from "@/store/interface";
import Images from "@/components/block/images.vue";
import { register } from "swiper/element/bundle";
//TODO:有组件错误
defineProps<{ data: HomeArray[] }>();
//幻灯片用
register();

const spaceBetween = 10;
const onProgress = (e: { detail: [any, any] }) => {
  const [_swiper, _progress] = e.detail;
};

const onSlideChange = (_e: any) => {};
</script>
<template>
  <section class="home-wrap">
    <swiper-container
      :slides-per-view="1"
      :space-between="spaceBetween"
      :centered-slides="true"
      :pagination="{
        hideOnClick: true,
      }"
      @progress="onProgress"
      @slidechange="onSlideChange"
    >
      <swiper-slide
        class="banner-wrap index-swiper"
        v-for="item in data"
        :key="item.id"
      >
        <a
          :href="item.link"
          class="ad-click-mask"
          :target="item.type === 'true' ? '_blank' : ''"
        >
          <Images :img="item.featured_image" />
        </a>
      </swiper-slide>
    </swiper-container>
  </section>
</template>
<style scoped lang="less">
.index-swiper {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.banner-wrap {
  width: 100%;
  height: 554px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
</style>
